<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>举报</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		#foot_div {
			display: block;
			bottom: 0px;
			height: 50px;
			line-height: 50px;
			width: 100%;
			position: fixed;
			text-align: center;
			color: #fff;
			padding: 0 15px;
			box-sizing: border-box;
		}

		#foot_div ul {
			width: 99%;
			margin: 0 auto;
		}

		#foot_div li {
			width: 33%;
			float: left;
		}

		#foot_div ul li:nth-of-type(1) {
			text-align: left;
		}

		#foot_div ul li:nth-of-type(2) {
			text-align: center;
		}

		#foot_div ul li:nth-of-type(3) {
			text-align: right;
		}
	</style>
</head>

<body>
	<div id="foot_div" style="background:rgba(0,0,0,.7)">
		<ul style="background:rgba(0,0,0,.7)">
			<li tapmode onclick="back();">取消</li>
			<li style="color:transparent">重置</li>
			<li tapmode onclick="saveImageClip();" style="color:#72D5EF">完成</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			info: [],
			sel_info: [],
			type: 1,
			img_src: '',
			destPath: ''
		},
		methods: {

		}

	})
	apiready = function() {
		vm.img_src = api.pageParam.img_src;
		// alert(vm.video_path)
		functionName()

	};

	function functionName() {
		var FNImageClip = api.require('FNImageClip');
		var rect_w = api.winWidth;
		var rect_h = api.winHeight;
		var clip_w = parseInt(rect_w - 2);
		var clip_y = parseInt((rect_h - clip_w - 30) / 2);
		FNImageClip.open({
			rect: {
				x: 0,
				y: 0,
				w: rect_w,
				h: rect_h - 50
			},
			srcPath: vm.img_src,
			style: {
				//（可选项）字符串类型；图片裁剪控件遮罩层背景，支持 rgb，rgba，#；默认：#888
				mask: 'rgba(0,0,0,.7)',
				clip: {
					//（可选项）数字类型；裁剪区域的宽度，当 appearance 为 circular 时，w 为半径；默认：rect.w / 2
					w: 335,
					//（可选项）数字类型；裁剪区域的高度，当 appearance 为 circular 时，h 无效；默认：w
					h: 335,
					x: 20,
					y: 166,
					borderColor: '#005A93',
					borderWidth: 1,
					//（可选项）字符串类型；裁剪区域的形状，支持 circular | rectangle；默认：rectangle
					appearance: 'rectangle'
				}
			},
			mode: 'image',
			fixedOn: api.frameName
		}, function(ret, err) {
			// alert(ret.status);
		});
	}
	//返回应用页面
	function back() {
		closeImageClip();
		api.closeWin({});
	}
	//关闭裁剪组件
	function closeImageClip() {
		var FNImageClip = api.require('FNImageClip');
		FNImageClip.close();
	}
	//重置裁剪组件
	function resetImageClip() {
		var FNImageClip = api.require('FNImageClip');
		FNImageClip.reset();
	}
	//保存裁剪之后的图片
	function saveImageClip() {
		var FNImageClip = api.require('FNImageClip');
		FNImageClip.save({
			destPath: 'fs://imageClip/result.png',
			copyToAlbum: false,
			quality: 1
		}, function(ret, err) {
			if (ret) {
				vm.destPath = ret.destPath
				post_ava('api/user/uploadAvatar', vm.destPath, function(ret) {
					if (ret.status) {
						send_event('logined')
						send_event('destPath')
						api.closeWin({});
					}
				})

			} else {
				// alert(JSON.stringify(err));
			}
		});
	}
</script>

</html>
